<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	body {
		background: none;
	}
  .popBox .close {
  	position: absolute;
  	right: 0;
  	top: 0;
  	width: 2.15rem;
  	height: 2rem;
  	background: url(../../image/common/close.png) no-repeat center center;
  	background-size: 0.8rem;
  }
	.popBox {
		width: 100%;
    max-height: 90%;
    background-color: #FFF;
		bottom: 0;
		left: 0;
		padding: 0 1rem;
	}
	.popBox .popHead{
		padding-bottom: 1.2rem;
		border-bottom: 1px solid #eee;
	}
.small{
	width: 4.8rem;
	height: 4.8rem;
	border: 1px solid #eee;
	/*position: relative;*/
	margin-top:-1rem;
	background: #fff;
}
.small img{
	width: 4.8rem;
}
.color-red{
	color: #e92320;
	font-size:1.2rem;
}
.choice:before,
.choice:after {
	display: block;
}
.sizeTit{
	padding: 0.8rem 0;
}
.choice {
	flex-wrap: wrap;
	border-bottom: 1px solid #eee;
}
.choice li {
	border: 1px solid #eee;
	color: #353336;
	border-radius: 0.1rem;
	height: 1.6rem;
	line-height: 1.6rem;
	text-align: center;
	padding: 0 1.15rem;
	margin: 0 0.6rem 0.8rem 0;
	font-size: 0.7rem;
	background-color: #F1F1F1;
}
.choice li.outline {
	background-color: #FFF1E5;
	color: #FF8028;
	border:1px solid #FFC9AE;
}
.choice li.no {
color: rgba(68, 68, 68, 0.5);

}
.choice li.outline:before {
	border-radius: 2rem;
	border: none;
}
.numBox img {
	width: 1.2rem;
}
.numBox input.num {
	text-align: center;
	font-size: 0.6rem;
	color: #333;
	height: 1.2rem;
	background-color: #f1f1f1;
}
.shu{
	min-height: 2.9rem;
}
.up,.down{
	width: 1.2rem;
	height: 1.2rem;
	font-size: 0.6rem;
	line-height: 1.2rem;
	text-align: center;
	color: #333;
	background-color: #F1F1F1;
}
.font-size-32{
	font-size: 1.6rem;
}
.black{
	height: 3.1rem;
}
.fixed{
	padding: 0 0.8rem;
}
.comBtmBtn{
		position: fixed;
		left: 0.8rem;
		right: 0.8rem;
		height: 2.25rem;
		bottom: 0.8rem;
		border-radius: 5rem;
}
</style>
</head>
<body>
<div class="popOverlay" tapmode onClick="closeMask();"></div>
<div class="popBox">
	<div class="">
		<div class="popHead aui-flex-col aui-border-b">
			<div class="small">
				<img src="../../image/demo/10.png" alt="">
			</div>
			<div class="aui-padded-l-15">
				<div class="color-e7"><span class="font-size-32 text-bold">5</span>积分</div>
				<div class="aui-font-size-14 color-35">已选：<span>银灰色</span></div>
			</div>
			<div class="close" tapmode onclick="closeMask()"></div>
		</div>
		<div>
			<div class="sizeTit aui-font-size-14 color-ad">规格尺寸</div>
			<ul class="choice aui-flex-col aui-flex-middle">

				<li class="outline">银灰色</li>
				<li>香槟色</li>
				<li class="no">商务黑</li>
			</ul>
		</div>
		<div class="shu aui-flex-col aui-flex-between aui-flex-middle">
			<div class="aui-font-size-14 color-35">购买数量</div>
			<div class="aui-flex-col aui-flex-middle aui-flex-right numBox">
				<div class="down">-</div>
				<div class="" style="width: 2.5rem;padding: 0 1px"><input type="number" readonly value="1" class="num"></div>
				<div class="up">+</div>
			</div>
		</div>
	</div>
	<div class="black"></div>
	<div class="fixed">
		<div class="comBtmBtn">确定</div>
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
	// 	$api.addCls($api.dom('.popBox'),'on');
  //   };
	// function closePop(){
	// 	$api.removeCls($api.dom('.popBox'),'on');
	// 	setTimeout(function(){
	// 		api.closeFrame();
	// 	},100);
	}
	$$('.choice>li').on('click',function(){
			if(!$$(this).hasClass('no')){
				$$(this).addClass("outline").siblings().removeClass("outline");
			}
	})
	$$('.numBox').each(function(){
		var box = $$(this);
		var input = box.find('.num');
		box.find('.down').on('click',function(){
			var num = input.val();
			num = parseInt(num)-1;
			num = num >0 ? num : 1;
			input.val(num);
		});
		box.find('.up').on('click',function(){
			var num = input.val();
			num = (!num) ? 0 : num;
			num = parseInt(num)+1;
			input.val(num);
		});
	});
</script>
</html>
